<script setup>
import about from "@/assets/index/about-img-hero.png";
const numList = [
  {
    id: 1,
    num: "305M",
    content: "注册用户",
  },
  {
    id: 2,
    num: "163B",
    content: "上传的文件",
  },
  {
    id: 3,
    num: "10M+",
    content: "每日活跃用户",
  },
  {
    id: 4,
    num: "200+",
    content: "使用OK云盘的国家",
  },
];
const year = [
  { year: 2017, num: 100 },
  { year: 2018, num: 200 },
  { year: 2019, num: 300 },
  { year: 2020, num: 400 },
  { year: 2021, num: 500 },
  { year: 2022, num: 600 },
  { year: 2023, num: 600 },
  { year: 2024, num: 600 },
];
const active = ref(1);
const tab_active = ref(0);
function tabActive(num) {
  tab_active.value = num;
  getList();
}
function changeActive(v) {
  if (v == "left") {
    if (tab_active.value - 1 < 0) {
      tab_active.value = 7;
    } else {
      tab_active.value--;
    }
  }
  if (v == "right") {
    if (tab_active.value + 1 > 7) {
      tab_active.value = 0;
    } else {
      tab_active.value++;
    }
  }
}
</script>

<template>
  <div class="overflow-x-hidden">
    <!-- 头部导航 -->
    <div class="auto pc:max-w-[1200px] mobile:text-4xl mobile:px-10">
      <Nav />
    </div>

    <div class="auto pc:max-w-[1200px] mobile:px-10">
      <div class="pc:flex mt-[80px]">
        <div class="left">
          <p class="title text-[26px] text-[#00E1FF]">关于我们</p>
          <h1 class="text-[68px] font-bold mobile:text-4xl mobile:my-[20px]">
            自2017年以来一直在倡导在线隐私和安全
          </h1>
          <p class="title text-[20px] text-[#666] mobile:mb-[20px]">
            每个人都享有隐私权，即使在网络上也是如此。这就是我们创建OK云盘的原因——帮助您保持在网络上私密和安全地存储和共享信息。
          </p>
        </div>
        <div class="right pc:w-[700px] pc:ml-[80px] mobile:w-full">
          <img :src="about" alt="" />
        </div>
      </div>
    </div>

    <div class="bg-[#00E1FF] pc:h-[280px] mt-[100px] mb-[80px]">
      <div class="auto pc:max-w-[1200px] mobile:text-4xl mobile:px-10">
        <ul class="pc:flex justify-between items-center">
          <li
            v-for="i in numList"
            :key="i.id"
            class="flex flex-col items-center justify-evenly pc:h-[200px] pc:py-[80px] mobile:py-[40px]"
          >
            <p class="text-[60px] text-[#fff] font-bold">{{ i.num }}</p>
            <p class="text-[24px] text-[#fff]">{{ i.content }}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="mobile:px-10">
      <ul class="text-center pc:flex pc:justify-between auto pc:max-w-[1200px]">
        <li
          class="border rounded-xl w-[350px] h-[300px] p-[30px] text-left mobile:mb-[40px] mobile:w-full"
        >
          <div class="w-[60px] h-[60px] mb-[20px]">
            <img src="@/assets/index/renwu.png" alt="" />
          </div>
          <h2 class="text-[#333] text-[32px] font-bold mb-[30px]">
            我们的任务
          </h2>
          <p class="text-[#888] mobile:text-base">
            为每个人提供一个安全和私密的空间，让用户可以通过强大和创新的产品进行存储、共享和交换信息，并决定谁可以访问他们的信息
          </p>
        </li>
        <li
          class="border rounded-xl w-[350px] h-[300px] p-[30px] text-left mobile:mb-[40px] mobile:w-full"
        >
          <div class="w-[60px] h-[60px] mb-[20px]">
            <img src="@/assets/index/yuan.png" alt="" />
          </div>
          <h2 class="text-[#333] text-[32px] font-bold mb-[30px]">
            我们的愿景
          </h2>
          <p class="text-[#888] mobile:text-base">
            创造一个让所有人的信息默认都是安全和具有隐私的世界
          </p>
        </li>
        <li
          class="border rounded-xl w-[350px] h-[300px] p-[30px] text-left mobile:mb-[40px] mobile:w-full"
        >
          <div class="w-[60px] h-[60px] mb-[20px]">
            <img src="@/assets/index/fuwu.png" alt="" />
          </div>
          <h2 class="text-[#333] text-[32px] font-bold mb-[30px]">
            我们的承诺
          </h2>
          <p class="text-[#888] mobile:text-base">在OK云盘，您的数据由您掌控</p>
        </li>
      </ul>
    </div>

    <div class="auto pc:max-w-[1200px] mobile:px-10">
      <div class="flex mt-[80px] mobile:flex-wrap-reverse">
        <div class="left">
          <h1 class="text-[52px] font-bold mobile:text-4xl">
            我们保护您的数据并尊重您的隐私。
          </h1>
          <p class="title text-[20px] text-[#666] mt-[20px] mb-[50px]">
            我们使用最先进的安全和隐私措施以及工具，来保护您的信息并让您掌控您的数据。
          </p>
          <router-link to="/login">
            <p class="text-lg text-[#333] font-bold">
              登录了解更多 <i class="pi pi-arrow-right font-bold"></i>
            </p>
          </router-link>
        </div>
        <div
          class="right pc:w-[700px] pc:ml-[80px] mobile:w-full mobile:mb-[40px]"
        >
          <img src="@/assets/index/bgscreen.png" alt="" />
        </div>
      </div>
    </div>

    <div class="bg-[#E6ECF3] my-[80px]">
      <div class="auto pc:max-w-[1200px] mobile:px-10">
        <h1 class="text-[52px] font-bold py-[50px] mobile:text-4xl">
          使用OK云盘意味着您对那些想要了解您一切的人
          说“不”，对互联网自由和您的隐私权说“是”。
        </h1>
      </div>
    </div>

    <div class="auto pc:max-w-[1200px] mobile:px-10">
      <h1 class="text-[52px] font-bold py-[50px] text-center mobile:hidden">
        OK云盘的故事
      </h1>
      <!-- tabs -->
      <div
        class="tebView flex pc:justify-start text-center border-b-[6px] mobile:justify-evenly"
      >
        <div
          class="tabPanel pc:w-[150px] text-[26px] leading-[60px] font-bold cursor-pointer mobile:flex mobile:w-[100px]"
          :class="tab_active == index ? 'tab_active' : ''"
          @click="tabActive(index)"
          v-for="(i, index) in year"
        >
          {{ i.year }}
        </div>
      </div>
      <!-- 轮播内容 -->
      <div class="pc:flex mt-[80px] pc:mb-[100px] mobile:mb-[50px]">
        <div class="left pc:w-[600px] pc:mr-[100px]">
          <img src="@/assets/index/bgindex.png" alt="" />
        </div>
        <div class="right flex flex-col justify-evenly mt-[40px]">
          <h1 class="text-[52px] font-bold mobile:text-4xl">100亿文件被上传</h1>
          <p class="text-[20px] text-[#666] mt-[40px]">
            在短短{{
              tab_active + 1
            }}年内，OK云盘用户在他们的安全帐户中存储了超过100亿个文件。
          </p>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="auto pc:max-w-[1200px]">
        <div class="auto flex w-[160px] justify-between">
          <div
            class="left w-[60px] h-[60px] bg-[#E8E8EC] cursor-pointer rounded-xl flex justify-center items-center"
            @click="changeActive('left')"
          >
            <i class="pi pi-arrow-left font-bold text-xl"></i>
          </div>
          <div
            class="right w-[60px] h-[60px] bg-[#E8E8EC] cursor-pointer rounded-xl flex justify-center items-center"
            @click="changeActive('right')"
          >
            <i class="pi pi-arrow-right font-bold text-xl"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="auto pc:max-w-[1200px] mobile:px-10">
      <h1 class="text-[52px] font-bold text-center mt-[100px] mobile:text-4xl">
        我们的文化
      </h1>
      <p class="text-[20px] py-[20px] text-center text-[#666]">
        我们致力于成为全球最易于使用、最值得信赖和最安全的云平台。我们以客户为中心的态度推动我们的使命，利用创新技术解决他们的问题。
      </p>

      <div class="flex pc:mt-[80px] mb-[100px] mobile:flex-wrap-reverse">
        <div
          class="left flex flex-col justify-evenly pc:w-[500px] mobile:w-full"
        >
          <h1
            class="text-[52px] font-bold mobile:text-4xl mobile:text-left mobile:my-[30px]"
          >
            以MEGA的方式工作
          </h1>
          <p class="text-[18px] text-[#666] mobile:text-xl mobile:mb-[20px]">
            我们的员工是我们最宝贵的财富，我们对待他们也是如此。我们知道，要吸引和留住世界一流的人才，必须提供一个世界一流的工作场所，所以:我们创造了一个!
          </p>
          <p class="text-[18px] text-[#666] mobile:text-xl">
            如果您有能力改变世界，让我们用户的生活更美好，请联系我们。
          </p>
        </div>
        <div class="right w-[600px] pc:ml-[100px] mobile:w-full">
          <img src="@/assets/index/hero.png" alt="" />
        </div>
      </div>
    </div>

    <div class="auto pc:max-w-[1200px] mobile:px-10">
      <h1 class="text-[52px] font-bold text-left mt-[100px] mobile:text-4xl">
        办公地址
      </h1>
      <p class="text-[20px] py-[20px] text-left text-[#666]">
        OK云盘在全球20多个国家都有远程贡献者。我们的办公室以混合模式运作，具有高度灵活性，包括每周有多个在家工作的日子。
      </p>
      <ul class="pc:flex pc:justify-between mt-[50px]">
        <li
          v-for="i in 2"
          class="pc:w-[550px] p-[50px] border rounded-2xl mobile:w-full mobile:mt-[20px]"
        >
          <h1 class="text-[38px] font-bold mobile:text-2xl">中国</h1>
          <p class="text-[24px] text-[#666] mobile:text-xl">
            北京、上海、深圳、香港
          </p>
        </li>
      </ul>
    </div>

    <div class="bg-[#F7F9FB] mt-[100px] mb-[100px]">
      <div class="auto pc:max-w-[1200px] mobile:px-10 py-[50px]">
        <h1 class="text-[52px] font-bold mb-[20px] mobile:text-4xl">
          月度活跃用户
        </h1>
        <p class="text-[20px] text-[#666] mb-[30px] mobile:text-xl">
          按照《数字服务法》的要求，MEGA建议在过去的六个月中，它在欧洲的月度活跃用户少于4,500万。我们预计这种情况在未来六个月内不会改变。
        </p>
      </div>
    </div>

    <!-- 底部栏 -->
    <div class="foot auto pc:max-w-[1200px] mobile:px-10">
      <Foot />
    </div>
  </div>
</template>

<style scoped lang="scss">
.tab_active {
  color: #00e1ff;
  position: relative;
  &::after {
    position: absolute;
    width: 150px;
    height: 6px;
    content: "";
    background-color: #00e1ff;
    left: 0;
    bottom: -7px;
  }
}

@media only screen and (max-width: 1040px) {
  .tab_active {
    color: #00e1ff;
    position: relative;
    &::after {
      position: absolute;
      width: 100%;
      height: 6px;
      content: "";
      background-color: #00e1ff;
      left: 0;
      bottom: -7px;
    }
  }
}
</style>
